<template>

  <section class="check-page">

   
    <Notice :toCancelBlock='cancelBlock'  @closeModal="CloseModal" />

    <Danger :toDangerBlock='dangerBlock' />

    <div class="container">
      <div class="row check_block">
        <div class="content">
          <div class="check_list white_bg">
            <div class="check_l1_top relative">
              <div class="left w_4">
                <ul class="ul_list">
                  <li class="list_lable">
                    患者姓名：
                  </li>
                  <li class="list_detail">
                    <h3>
                      欧阳安俊
                      <span class="danger_p">
                        (HIV)
                      </span>
                    </h3>
                    <p>
                      (男，18岁)
                    </p>
                  </li>

                </ul>
              </div>
              <div class="left w_3">
                <ul class="ul_list">
                  <li class="list_lable">
                    手术医生：
                  </li>
                  <li class="list_detail">
                    <h3>
                      何妙春
                      <span>
                        (N4)
                      </span>
                    </h3>

                  </li>

                </ul>
              </div>
              <div class="left w_2">
                <ul class="ul_list">
                  <li class="list_lable">
                    手术部位：
                  </li>
                  <li class="list_detail">
                    <h3>
                      左眼

                    </h3>

                  </li>

                </ul>
              </div>
              <div class="absolute state">
                <div class="danger">
                  急症
                </div>
                <div class="warning">
                  感染
                </div>
              </div>
            </div>
            <div class="bolder_bottom mb_10"></div>
            <div class="check_l1_middle ">
              <div class="over_flow_hidden ">
                <div class="left w_5_half">
                  <ul class="ul_list">
                    <li class="list_lable">
                      主索引：
                    </li>
                    <li class="list_detail">
                      <h2 class="font_weight_bolder ">
                        467048
                      </h2>

                    </li>

                  </ul>
                </div>
                <div class="left w_5_half">
                  <ul class="ul_list">
                    <li class="list_lable">
                      病区：
                    </li>
                    <li class="list_detail">
                      <h3 class="font_weight_bolder black_p">
                        四区
                      </h3>

                    </li>

                  </ul>
                </div>
                <div class="left w_5_half">
                  <ul class="ul_list">
                    <li class="list_lable">
                      床号：
                    </li>
                    <li class="list_detail">
                      <h3 class="font_weight_bolder black_p">
                        04
                      </h3>

                    </li>

                  </ul>
                </div>
                <div class="left w_5_half">
                  <ul class="ul_list">
                    <li class="list_lable">
                      费别：
                    </li>
                    <li class="list_detail">
                      <h3 class="font_weight_bolder black_p">

                      </h3>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_5">
                  <ul class="ul_list">
                    <li class="list_lable">
                      麻醉医生：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        全麻
                      </p>

                    </li>

                  </ul>
                </div>
                <div class="left w_5">
                  <ul class="ul_list">
                    <li class="list_lable">
                      助理：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        刘能、赵四、谢大脚
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_10">
                  <ul class="ul_list">
                    <li class="list_lable">
                      术前诊断：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        1、诊断仪；2、诊断二
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_10">
                  <ul class="ul_list">
                    <li class="list_lable">
                      手术方式：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        手术方式一;手术方式二;手术方式三;
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_10">
                  <ul class="ul_list">
                    <li class="list_lable">
                      手术史：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        无
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_10">
                  <ul class="ul_list">
                    <li class="list_lable">
                      D R：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        胸片
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_10">
                  <ul class="ul_list">
                    <li class="list_lable">
                      心电图：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        心电图结果
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
              <div class="over_flow_hidden ">
                <div class="left w_10">
                  <ul class="ul_list">
                    <li class="list_lable">
                      既往史：
                    </li>
                    <li class="list_detail">
                      <p class="font_weight_bolder black_p">
                        <span>高血压</span>
                        <span>糖尿病</span>
                      </p>

                    </li>

                  </ul>
                </div>
              </div>
            </div>
            <div class="bolder_bottom mb_10"></div>
            <div class="check_l1_bottom">
              <div class="left w_10_third">
                <ul class="ul_list">
                  <li class="list_lable">
                    一级核查：
                  </li>
                  <li class="list_detail">
                    <h3 class="font_weight_bolder">
                      王丽N1(10.01)
                    </h3>

                  </li>

                </ul>
              </div>
              <div class="left w_10_third">
                <ul class="ul_list">
                  <li class="list_lable">
                    二级核查：
                  </li>
                  <li class="list_detail">
                    <h3 class="font_weight_bolder">
                      王丽N1(10.01)
                    </h3>

                  </li>

                </ul>
              </div>
              <div class="left w_10_third">
                <ul class="ul_list">
                  <li class="list_lable">
                    三级核查：
                  </li>
                  <li class="list_detail">
                    <h3 class="font_weight_bolder">
                      王丽N1(10.01)
                    </h3>

                  </li>

                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="content ">
          <div class="operative_site white_bg">
            <div class="over_flow_hidden mb_10">
              <ul class="ul_list">
                <li class="list_lable">
                  手术部位：
                </li>
                <li class="list_detail">
                  <h3 class="font_weight_bolder">
                    左眼
                  </h3>

                </li>

              </ul>
            </div>
            <div class="mb_10 people_img relative">
              <img src="@/assets/img/check_people.png" class="" alt="check people" />

              <div class="eye_btn" @click="commit_dc(2)">        
                <img :src="eye_img" alt="check people" />  
              </div>
            </div>
            <div class="bolder_bottom mb_10"></div>
            <div>
              <h1 class="danger_p">
                过敏史：青霉素
              </h1>
            </div>
          </div>

        </div>
        <div class="content ">
          <div class="dc_config white_bg">
            <div class="mb_10">
              <button type="button" class="btn btn_grey btn_radius w_10" @click="commit_dc(1)" 
              :class="chose_list=='chose_list'?'active':''">
                文书确认
              </button>
            </div>
            <div class="dc_config_content mt_10" ref="dc_config_content">
              <ul>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/ssty.png" class="deflaut_icon" alt="icon" />
                 
                  <img src="@/assets/img/icon/check/sstys.png" class="active_icon" alt="icon" />
                  <p>
                    手术同意书
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/aqhc.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/achcs.png" class="active_icon" alt="icon" />
                  <p>
                    安全核查表
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/fxpg.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/fxpgs.png" class="active_icon" alt="icon" />
                  <p>
                    风险评估书
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/sxsq.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/sxsqs.png" class="active_icon" alt="icon" />
                  <p>
                    病例申请书
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/yphc.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/yphcs.png" class="active_icon" alt="icon" />
                  <p>
                    精神毒麻药
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/mjty.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/mjtys.png" class="active_icon" alt="icon" />
                  <p>
                    麻醉同意书
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/zqs.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/zqss.png" class="active_icon" alt="icon" />
                  <p>
                    医用耗材
                  </p>
                </li>
                <li :class="chose_list">
                  <img src="@/assets/img/icon/check/sxsq.png" class="deflaut_icon" alt="icon" />
                  <img src="@/assets/img/icon/check/sxsqs.png" class="active_icon" alt="icon" />
                  <p>
                    输血申请
                  </p>
                </li>
              </ul>
            </div>
          </div>

        </div>
        <div class="content">
          <div class="dc_config_btn table_block white_bg">
            <div class="table_block_cell">
              <button class="btn btn_grey w_10 btn_radius" 
              :class="step == '3'  ?'active':'' " @click="commit_dc(4)">
                <h1>
                  确定
                </h1>
              </button>
              <button class="btn btn_grey w_10 btn_radius">
                <h1>等待</h1>
              </button>
              <button class="btn btn_grey w_10 btn_radius" @click="concel_ops()">
                <h1>取消</h1>
              </button>
            </div>
          </div>
        </div>
        <div class="content ">
          <div class="check_count white_bg">
            <div class="check_count_top">
              <ul class="ul_list w_10">
                <li class="">
                  等待手术人数
                </li>
                <li class="">
                  <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                </li>
                <li class="">
                  <h3 class="font_weight_bolder">5人</h3>
                </li>

              </ul>
              <ul class="ul_list w_10">
                <li class="">
                  预计手术开始时间
                </li>
                <li class="">
                  <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                </li>
                <li class="">
                  <h3 class="font_weight_bolder">5人</h3>
                </li>

              </ul>
              <ul class="ul_list w_10">
                <li class="">
                  术前抗生素时间
                </li>
                <li class="">
                  <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                </li>
                <li class="">
                  <h3 class="font_weight_bolder">5人</h3>
                </li>

              </ul>
            </div>
            <div class="bolder_bottom mb_10"></div>
            <div class="check_count_center">
              <div class="count_center_box mb_20">
                <p class="text_left">
                  医生备注
                </p>
                <div class="center_box_text">

                </div>
              </div>
              <div class="count_center_box">
                <p class="text_left">
                  护士备注
                </p>
                <div class="center_box_text">

                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="row check_block_bottom">
        <div class="content w_2">
          <div class="white_bg check_msg">
            <div class="check_msg_title">
              <p>病人检查信息</p>
            </div>
            <div class="check_msg_content mt_10">
              <ul class="check_msg_list">
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                  <p>
                    采集
                  </p>
                </li>
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/binglishi.png" class="icon_hover" alt="icon" />
                  <p>
                    病例
                  </p>
                </li>
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/jybg.png" class="icon_hover" alt="icon" />
                  <p>
                    检验
                  </p>
                </li>
              </ul>
              <ul class="check_msg_list">
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/bl.png" class="icon_hover" alt="icon" />
                  <p>
                    病理
                  </p>
                </li>
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                  <p>
                    采集
                  </p>
                </li>
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/pasc.png" class="icon_hover" alt="icon" />
                  <p>
                    PACS
                  </p>
                </li>
              </ul>
              <ul class="check_msg_list">
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                  <p>
                    采集
                  </p>
                </li>
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/xdt.png" class="icon_hover" alt="icon" />
                  <p>
                    心电图
                  </p>
                </li>
                <li class="check_msg_block">
                  <img src="@/assets/img/icon/check/message/jc.png" class="icon_hover" alt="icon" />
                  <p>
                    检查
                  </p>
                </li>
              </ul>
              <ul class="check_msg_list">
                <li class="check_msg_block ">
                  <img src="@/assets/img/icon/check/message/lsyz.png" class="icon_hover" alt="icon" />
                  <p>
                    临时医嘱
                  </p>
                </li>
                <li class="check_msg_block ">
                  <img src="@/assets/img/icon/check/message/ghhz.png" class="icon_hover" alt="icon" />
                  <p>
                    更换患者
                  </p>
                </li>

              </ul>

            </div>
          </div>

        </div>
        <div class="content w_5">
          <div class="white_bg check_project">
            <div class="check_project_list mb_10 ">
              <ul class="ul_list">
                <li class="">
                  <p class="font_weight_bolder">检查项目：</p>
                </li>
                <li>
                  <button class="btn active">
                    术前四项
                  </button>
                  <button class="btn ">
                    凝血四项
                  </button>
                  <button class="btn ">
                    全血分析
                  </button>
                  <button class="btn ">
                    生化七项
                  </button>
                  <button class="btn ">
                    血常规
                  </button>
                  <button class="btn ">
                    尿常规
                  </button>
                  <button class="btn ">
                    X光
                  </button>
                  <button class="btn ">
                    心电图
                  </button>
                </li>
              </ul>
            </div>
            <table class="table table-border table_layout table_small">
              <thead>
                <tr>
                  <th colspan="8">检验数据异常值</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="2">标本名</td>

                  <td>开单</td>

                  <td>项目名称</td>

                  <td>状态</td>

                  <td>结果</td>

                  <td>单位</td>

                  <td>参考范围</td>

                </tr>
                <tr>

                  <td></td>

                  <td>10:00</td>

                  <td>何妙春</td>

                  <td>04</td>

                  <td>467048</td>

                  <td>欧阳安军</td>

                  <td>左眼白内障超声化抽手术</td>

                  <td>左眼老年性白内障</td>


                </tr>
                <tr>

                  <td rowspan="4"></td>

                  <td>10:00</td>

                  <td>何妙春</td>

                  <td>04</td>

                  <td>467048</td>

                  <td>欧阳安军</td>

                  <td>左眼白内障超声化抽手术</td>

                  <td>左眼老年性白内障</td>


                </tr>
                <tr style="height:50px">

                  <td></td>

                  <td></td>

                  <td></td>

                  <td></td>

                  <td></td>

                  <td></td>

                  <td></td>

                </tr>
              </tbody>

            </table>
          </div>
        </div>
        <div class="content w_3">
          <div class="white_bg check_life">
            <table class="table table-border table_layout table_small">
              <thead>
                <tr>
                  <th colspan="8">患者生命体征</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td></td>
                  <td>时间</td>

                  <td>体温</td>

                  <td>血压</td>

                  <td>脉搏</td>

                  <td>呼吸</td>



                </tr>
                <tr>

                  <td></td>

                  <td>2017/10/20</td>

                  <td>36.6</td>

                  <td>90/120</td>

                  <td>76</td>

                  <td>20</td>

                </tr>
                <tr>

                  <td></td>

                  <td>2017/10/20</td>

                  <td>36.6</td>

                  <td>90/120</td>

                  <td>76</td>

                  <td>20</td>

                </tr>

              </tbody>

            </table>
          </div>
        </div>
      </div>

    </div>

  </section>


</template>

<script lang="ts">
  import {
    Component,
    Vue
  }from 'vue-property-decorator';

  import Scan from '@/components/modal/scan/Scan.vue';
  import Cancel from '@/components/modal/cancel/Cancel.vue';
  import Danger from '@/components/modal/danger/Danger.vue';
  import Notice from '@/components/modal/notice/Notice.vue';

  @Component({

    components: {

      Scan,
      Notice,
      Danger


    },

  })

  export default class Patient_Check extends Vue {
    chose_list = "";
    eye_img = require('@/assets/img/button/r_eye.png');
    step = "1";
    scanBlock = true;
    cancelBlock = true;
    dangerBlock = false;

    created() {
     
    }

    commit_dc(steps:any) {
      if (steps == "1") {
        if (this.chose_list == "") {
          this.chose_list = "chose_list";
          this.step="2";
        } else {
          this.chose_list = "";
          this.eye_img = require('@/assets/img/button/r_eye.png');
          this.step="1";
        }
      }else if(steps == "2"){
        if (this.chose_list == "chose_list") {
          if(this.step=="3"){
            this.step="2";
            this.eye_img = require('@/assets/img/button/r_eye.png');
          }else{
            this.eye_img = require('@/assets/img/button/r_eyes.png');
            this.step="3";
          }
          
          
        }
      }else if(steps == "4"){
        if(this.step=="3"){
          this.scanBlock = true;
         
        }
        
      }
    }

    CloseModal(msg:any) {
      this.scanBlock = false;
      this.cancelBlock = false;
      this.dangerBlock = false;
    }

    concel_ops(){  
      if(this.step=="3"){
        this.cancelBlock = true;
      }
    }

  }
</script>

<style lang="scss" scoped>
  .check-page {
    .container {
      background: $bgColor;
      padding: 0;

      .row {
        .content {
          padding-right: 0;
          overflow: auto;

          .white_bg {
            height: $box_height;
            overflow: auto;
            background: $content_bgColor;
            @include box_shadow;
            padding: 0.1rem;
          }

          &:first-child {
            width: 50%;
          }

          &:nth-child(2),
          &:nth-child(3) {
            width: 14%;
          }

          &:nth-child(4) {
            width: 8%;
          }

          &:nth-child(5) {
            width: 14%;
          }

          .ul_list {
            .list_detail {
              color: $themecolor;
            }
          }

          .check_l1_top {
            .ul_list {
              height: 60px;
            }

            overflow:hidden;

            .state {
              right: 0;
              color: $color;

              div {
                font-size: $small_p;
                padding: 3px;
                border-radius: 5px;
                margin-bottom: 5px;
              }

            }
          }

          .check_l1_middle {
            overflow: hidden;

            .over_flow_hidden {
              .ul_list {
                height: 30px;

                .list_lable {
                  text-align-last: justify;
                  width: 80px;
                }
              }
            }
          }

        }

        .operative_site {
          .people_img {
            height: 270px;

            .eye_btn {
              position: absolute;
              right: 0;
              top: 21px;
              cursor: pointer;
            }
          }
        }

        .dc_config {
          .btn {
            border-radius: 5px;
          }

          .dc_config_content {
            ul {
              li {
                width: 50%;
                padding: 5px;
                cursor: pointer;

                p {
                  font-size: $small_p;
                }

                img {
                  width: 70%;
                  margin: auto;

                }

                .active_icon {
                  display: none;
                }

              }

              .chose_list {
                .deflaut_icon {
                  display: none;
                }

                .active_icon {
                  display: block;
                }
              }

            }
          }
        }

        .dc_config_btn {
          .table_block_cell{
            button {
              padding: 20px 0;
              margin-bottom: 20px;

            }
            button:nth-child(1){
              background:$color_state_start;
              color:$color;
              &.active
              {
                 background:$warning_color;
              }
            }
            button:nth-child(2){
              @extend .btn_defalut;
            }
            button:nth-child(3){
              @extend .btn_black;
            }
          }
          
        }

        .check_count {
          .check_count_top {
            .ul_list {
              margin-bottom: 10px;

              li {
                font-size: $small_p;
                text-align: left;

                img {
                  width: 22px;

                }

                &:nth-child(1) {

                  width: 60%;
                }

                &:nth-child(3) {
                  text-align: left;
                  color: $themecolor;
                }
              }
            }
          }

          .count_center_box {
            p {
              font-size: $small_p;
              text-align: left;
              margin-bottom: 5px;
            }

            .center_box_text {
              @include bolder;
              height: 85px;
              text-align: left;
            }
          }
        }

      }

      //下半部分
      .check_block_bottom {
        .content {
          padding-top: 0;

          .white_bg {
            height: 225px;
            padding: 0.05rem;
          }

          .check_msg {
            .check_msg_title {
              p {
                font-size: $small_p;
              }
            }

            .check_msg_content {
              .check_msg_list {
                margin-bottom: 1%;

                .check_msg_block {
                  background: $blue_color;
                  width: 32%;
                  margin-right: 1%;
                  padding: 2px;

                  p {
                    color: $color;
                    font-size: 0.1rem;
                    font-weight: bolder;
                  }

                  img {
                    width: 25px;
                  }

                  &:last-child {
                    margin-right: 0;
                  }
                }

                &:last-child {
                  .check_msg_block {
                    margin-right: 1%;

                    &:last-child {
                      width: 65%;
                      margin-right: 0;
                      background: $warning_color;
                    }
                  }
                }
              }
            }

          }

          .check_project {
            padding: 0.1rem;

            .check_project_list {
              .ul_list {
                li {
                  button {
                    margin-right: 5px;
                    @extend .btn_white;
                    @extend .btn_small;
                    @extend .btn_radius_small;
                    border-color: $grey_p;
                    color: $grey_p;

                    &.active {
                      border-color: $themecolor;
                      color: $color;
                    }
                  }
                }
              }
            }

            .table {
              font-size: 0.1rem;

              tbody {
                tr:nth-child(2) {
                  background: #e8f7f4;
                }

                tr:nth-child(3) {
                  td:first-child {
                    border-bottom: 1px solid #cbcbcb;
                  }
                }
              }
            }
          }

          .check_life {
            .table {
              font-size: 0.1rem;

              tbody {
                tr:nth-child(2) {
                  background: #e8f7f4;
                }
              }
            }
          }


        }
      }
    }
  }
</style>